<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>注册</title>
  <link rel="stylesheet" href="/css/common.css">
  <link rel="stylesheet" href="/css/login.css">
</head>
<script src="js/jquery-3.5.1.min.js"></script>

<body>
  <!-- 导航栏 -->
  <div class="nav">
    传书
  </div>
  <div class="cover"></div>


  <!-- 主窗口区 -->
  <div class="login-container">

    <div class="login-dialog">
      <h3>注册</h3>
      <!-- 通过row, 分开一个一个的 -->
      <div class="row">
        <span>用户名:</span>
        <input type="text" id="userName">
      </div>
      <div class="row">
        <span>密码:</span>
        <input type="password" id="password" name="password1">
      </div>
      <div class="row">
        <span>确认密码:</span>
        <input type="password" id="password" name="password2">
      </div>
      <div class="row">
        <button type="submit" id="submit" onclick="register()">注册</button>
      </div>
    </div>
  </div>
  <script>
    function register() {
      let password1 = $("input[name=password1]").val();
      let password2 = $("input[name=password2]").val();
      let userName = $("#userName").val();
      if (userName == '' || password1 == '' || password2 == '') {
           alert("用户名或密码为空") ; 
      } else {
        if (password1 != password2) {
          alert("两次输入的密码不同");
        } else {
          $.ajax({
            type: 'post',
            url: '/user/register',
            data: {
               userName : userName,
               password : password1
            },
            success: function(result){
                 if(result.userName == null){
                   alert("注册失败,用户名已被占用") ; 
                 }else{   
                    alert("注册成功"); 
                    location.href = "login.html" ;
                 }
            }


          });

        }
      }


    }
  </script>

</body>

</html>